<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="header-left" size="30" />
      填写服务订单
    </div>
    <stateBar :item="0" />
    <van-cell class="cell">
      <template #title>
        <van-image width="25px" height="25px"
        :src="orderList.service.serviceImg" 
        />
        <span class="server-name">{{ orderList.service.serviceName }}</span>
      </template>
      <template #default>
          <div class="service-text">服务内容</div>
      </template>
    </van-cell>
    <van-cell-group class="cell">
  <van-cell >
    <template #title>就诊医院</template>
    <template #default>
      <div @click="showHospital = true">
        <span v-if="form.hosipital_name">{{ form.hosipital_name }}</span>
        <span v-else>请选择就诊医院</span>
        <van-icon name="arrow"></van-icon>
      </div>
    </template>
  </van-cell>
</van-cell-group>
    <van-cell-group class="cell">
  <van-cell >
    <template #title>就诊时间</template>
    <template #default>
      <div @click="showTime = true">
        <span v-if="timeForm.timeText">{{ timeForm.timeText }}</span>
        <span v-else>请选择就诊时间</span>
        <van-icon name="arrow"></van-icon>
      </div>
    </template>
  </van-cell>
</van-cell-group>

<van-popup
  v-model:show="showHospital"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-picker
  v-model:show="showHospital"
  :columns="showHospColumns"
  @confirm="showHospConfirm"
  @cancel="showHospital = false"
/>
</van-popup>

<van-popup
  v-model:show="showTime"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-date-picker
  title="选择日期"
  :min-date="minDate"
  :max-date="maxDate"
  @confirm="showTimeConfirm"
  @cancel="showTime = false"
/>
</van-popup>


  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
import stateBar from '../../components/stateBar.vue';
import {getH5CompanionApi} from '../../api/index';
import { onMounted, ref, computed } from 'vue';
const router = useRouter();
  const goBack = () => {
    router.go(-1);
  };
  const orderList = ref({
    companion: [],
    hospitals: [],
    service: {}
  })

  const getH5Companion = async() => {
    const {data} = await getH5CompanionApi();
    orderList.value = data.data;
    console.log(orderList.value);
    // console.log(data);
  }

  const showHospital = ref(false);
  const showHospColumns = computed(() => {
    return orderList.value.hospitals.map(item => {
      return {
        text: item.name,
        value: item.id
      }
    })
  })
  //选择医院
  const form = ref({
    hospital_id: '',
    hosipital_name: ''
  })
  const showHospConfirm = (item) => {
    // console.log(item, 'value');
    form.value.hospital_id = item.selectedOptions[0].value;
    form.value.hosipital_name = item.selectedOptions[0].text;
    console.log(form.value.hospital_id, form.value.hosipital_name);
    showHospital.value = false;
  }
  const minDate = ref(new Date());
  const maxDate = ref(new Date(new Date().setFullYear(new Date().getFullYear() + 1)));
  const showTime = ref(false);
  const timeForm = ref({
    timeText: ''
  })
  const showTimeConfirm = (item) => {
    console.log(item, 'value');
    const dateStr = item.selectedValues.join('-')
    form.startTime = new Date(dateStr).getTime()
    timeForm.value.timeText = dateStr
    // timeForm.value.timeText = item.selectedValues[0] + '.' + item.selectedValues[1] +'.' + item.selectedValues[2];
    // console.log(timeForm.value.timeText);
    showTime.value = false;
  }
  onMounted(() => {
    getH5Companion();
  })
</script>

<style lang="less" scoped>
  .container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>